<template>
  <div class="books">
        <div class="row">
          <div class="col-md-3 col-xs-12 item" :key="i" v-for="(b,i) in books">
              <img :src="b.img" :alt="b.title">
              <h5>{{b.title}}</h5>
          </div>
      </div>
  </div>
</template>
<script>
import ertong from '../data/book_ertong';
import dongman from '../data/book_dongman';
import lishi from '../data/book_lishi';
import qingchunwenxue from '../data/book_qingchunwenxue';
export default {
  data() {
    return {
      books:[],  //当前所有的书籍数据
      d:''
    };
  },
  created() {
    //组件创建完成之后执行，组件没有被卸载就不会重新创建
    this.d = this.$route.params.type;
    this.initData();
  },
  watch: {
    $route() {
      //监听$route(路由地址信息)的变化
      this.d = this.$route.params.type;
      this.initData();
    }
  },
  methods: {
    initData() {
      switch (this.d) {
        case "ertong":
        this.books = ertong;
          break;

        case "dongman":
        this.books = dongman;
          break;

        case "lishi":
        this.books = lishi;
          break;

        case "qingchunwenxue":
        this.books = qingchunwenxue;
          break;

        default:
        this.books = '';
          break;
      }
    }
  }
};
</script>
<style scoped>
    .item h5{
        text-align:center
    }
    .item img{
        margin: 0 auto;
        display: block;
    }
    .item{
        height: 280px;
    }
</style>

